<script setup lang="ts">
import { AdminApi } from "@/api";
import { onMounted, ref } from "vue";
import { AdminInfo } from "@/utils/types";
import type { FormInstance, FormRules } from "element-plus";
import messageBox from "@/utils/messageBox";

const adminList = ref<any[]>([]);
const adminname = ref<string>("");
const visitable = ref<boolean>(false);
const editFlag = ref<boolean>(false);
const adminFormRef = ref<FormInstance>();
const rules = ref<FormRules<typeof adminInfo>>({
  adminname: [
    { required: true, message: "请输入管理员名称", trigger: "blur" },
    {
      pattern: /^[0-9a-zA-Z\u4e00-\u9fa5]{0,6}$/,
      message: "管理员名称长度不能大于6",
      trigger: "blur",
    },
  ],
  password: [{ required: true, message: "请输入管理员密码", trigger: "blur" }],
  role: [{ required: true, message: "请输入管理员角色", trigger: "blur" }],
  checkedKeys: [{ required: true, message: "请输入管理员权限", trigger: "blur" }],
});
const adminInfo = ref<AdminInfo>({
  adminname: "",
  password: "",
  role: "",
  checkedKeys: "",
});

const getAdminList = () => {
  AdminApi.adminList().then((res) => {
    console.log(res, "管理员列表");
    adminList.value = res.data.data;
  });
};
onMounted(() => {
  getAdminList();
});

const deleteAdmin = (id: string) => {
  messageBox("是否删除该条目").then(() => {
    AdminApi.deleteAdmin(id).then((res) => {
      console.log(res, "删除后返回值");
      getAdminList();
    });
  });
};

const selectAdmin = () => {
  if (adminname.value === "") {
    getAdminList();
    return;
  }
  AdminApi.selectAdmin(adminname.value).then((res) => {
    console.log(res, "查询返回值");
    if (res.data.code === "200") {
      adminList.value = res.data.data;
    }
  });
};

const initAdmin = () => {
  visitable.value = true;
  editFlag.value = false;
  adminInfo.value = {
    adminname: "",
    password: "",
    role: "",
    checkedKeys: "",
  };
};

const addAdmin = () => {
  AdminApi.addAdmin(adminInfo.value).then((res) => {
    console.log(res, "添加管理员后返回值");
    getAdminList();
    visitable.value = false;
  });
};

const editAdmin = (row: any) => {
  editFlag.value = true;
  adminInfo.value.adminname = row.adminname;
  adminInfo.value.password = row.password;
  adminInfo.value.role = row.role;
  adminInfo.value.checkedKeys = row.checkedKeys;
  visitable.value = true;
};

const updateAdmin = () => {
  AdminApi.updateAdmin(adminInfo.value).then((res) => {
    console.log(res, "修改管理员后返回值");
    getAdminList();
    visitable.value = false;
  });
};
</script>
<template>
  <div class="managerList">
    <div class="ipt">
      <el-input v-model="adminname" placeholder="请输入管理员名称">
        <template #append>
          <el-button icon="Search" @click="selectAdmin()" />
        </template>
      </el-input>
      <el-button type="primary" @click="initAdmin()">添加管理员</el-button>
    </div>
    <el-table :data="adminList" border>
      <el-table-column type="index" label="#" />
      <el-table-column prop="adminid" label="管理员ID" width="400px" />
      <el-table-column prop="adminname" label="管理员名称" />
      <el-table-column prop="role" label="权限" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="editAdmin(row)">编辑</el-button>
          <el-button type="danger" @click="deleteAdmin(row.adminid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
    v-model="visitable"
    :title="editFlag ? '编辑信息' : '创建管理员'"
    width="500">
    <el-form
      :model="adminInfo"
      class="demo-ruleForm"
      label-width="auto"
      :rules="rules"
      ref="adminFormRef">
      <el-form-item label="管理员名称" prop="adminname">
        <el-input v-model="adminInfo.adminname" :disabled="editFlag" />
      </el-form-item>
      <el-form-item label="管理员密码" prop="password">
        <el-input v-model="adminInfo.password" />
      </el-form-item>
      <el-form-item label="管理员角色" prop="role">
        <el-input v-model="adminInfo.role" />
      </el-form-item>
      <el-form-item label="管理员权限" prop="checkedKeys">
        <el-input v-model="adminInfo.checkedKeys" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visitable = false">取消</el-button>
        <el-button type="primary" @click="editFlag ? updateAdmin() : addAdmin()"
          >提交</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.managerList {
  width: 100%;
  border-radius: 5px;
  padding: 20px;
  overflow: hidden;
  background: #fff;
  .ipt {
    display: flex;
    margin-bottom: 20px;
    .el-input {
      width: 400px;
      margin-right: 20px;
    }
  }
}
</style>
